<!DOCTYPE html>
<html lang="en"
      xmlns:th="http://www.thymeleaf.org"
      xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity5">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>发改局</title>

  <!-- Google Font: Source Sans Pro -->
  <link rel="stylesheet"
        href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,700&display=fallback">


  <!-- IonIcons -->
  <link rel="stylesheet" href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css">
  <!-- Theme style -->



  <link rel="stylesheet" href="../../plugins/fontawesome-free/css/all.css">
  <!-- Theme style -->
  <link rel="stylesheet" href="../../dist/css/adminlte.css">


  <!-- bootstrap-fileinput CSS -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css"
        crossorigin="anonymous">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.5.0/font/bootstrap-icons.min.css"
        crossorigin="anonymous">

  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" crossorigin="anonymous">



  <link href="../../js/bootstrap-fileinput-5.2.2/css/fileinput.css" media="all" rel="stylesheet" type="text/css"/>
  <link href="../../js/bootstrap-fileinput-5.2.2/themes/explorer-fas/theme.css" media="all" rel="stylesheet"
        type="text/css"/>
</head>


<body class="hold-transition sidebar-mini">
<div class="wrapper">

  <!-- 主内容容器 -->
  <div class="content-wrapper">
    <!-- 容器头标题 -->
    <div class="content-header">
      <div class="container-fluid">

        <div class="row mb-2">
          <div class="col-sm-6">
            <h1 class="m-0">修改项目</h1>
          </div>
          <div class="col-sm-6">
            <ol class="breadcrumb float-sm-right">
              <li class="breadcrumb-item"><a href="#">首页</a></li>
              <li class="breadcrumb-item active">修改项目</li>
            </ol>
          </div>
        </div>

      </div>
    </div>

    <!-- 主题内容正文 -->
    <div class="content">
      <div class="container-fluid">
        <div class="row">
          <div class="col-lg-12">

            <div class="card card-primary">
              <!-- 卡片头部 -->
              <div class="card-header">
                <h3 class="card-title">修改项目</h3>
              </div>

              <!-- 表单开始 -->
              <form id="formData">
                <div class="card-body">
                  <div class="row">
                    <div class="col-lg-6">
                      <input type="hidden" id="pbi_id" name="id" th:value="${data.id}" />
                      <div class="form-group">
                        <label for="enId"><span style="color: red">*</span>企业选择</label>
                        <select class="form-control" id="enId" name="enId">
                        </select>
                      </div>

                      <div class="form-group">
                        <label for="projectName"><span style="color: red">*</span>项目名称</label>
                        <input type="text" class="form-control" id="projectName"name="projectName" th:value="${data.projectName}" placeholder="项目名称">
                      </div>

                      <div class="form-group">
                        <label for="address"><span style="color: red">*</span>企业住所</label>
                        <input type="text" class="form-control" id="address" name="address" th:value="${data.address}" placeholder="企业住所">
                      </div>

                      <div class="form-group">
                        <label for="industry"><span style="color: red">*</span>所属行业</label>
                        <input type="text" class="form-control" id="industry" name="industry" th:value="${data.industry}" placeholder="所属行业">
                      </div>

                      <div class="form-group">
                        <label for="totalInvestment"><span style="color: red">*</span>总投资(万元)</label>
                        <input type="number" class="form-control" id="totalInvestment" name="totalInvestment" th:value="${data.totalInvestment}" placeholder="总投资">
                      </div>

                      <div class="form-group">
                        <label for="investmentCompleted"><span style="color: red">*</span>已完成投资(万元)</label>
                        <input type="number" class="form-control" id="investmentCompleted" name="investmentCompleted" th:value="${data.investmentCompleted}" placeholder="已完成投资">
                      </div>

                      <div class="form-group">
                        <label for="nextYearPlan"><span style="color: red">*</span>未来年计划(万元)</label>
                        <input type="number" class="form-control" id="nextYearPlan" name="nextYearPlan" th:value="${data.nextYearPlan}" placeholder="未来年计划">
                      </div>

                      <div class="form-check">
                        <input type="checkbox" class="form-check-input" id="isScaleEnterprises" th:checked="${data.isScaleEnterprises > 0?true:false}" name="isScaleEnterprises">
                        <label class="form-check-label" for="isScaleEnterprises">是否为规上企业</label>
                      </div>

                    </div>
                    <div class="col-lg-6">



                      <div class="form-group">
                        <label for="constructionContent"><span style="color: red">*</span>主要建设内容及规模(<span style="color: red">随项目情况而进行更新</span>)</label>
                        <textarea class="form-control" id="constructionContent" name="constructionContent" th:text="${data.constructionContent}" placeholder="主要建设内容及规模"></textarea>
                      </div>

                      <div class="form-group">
                        <label for="processDescription"><span style="color: red">*</span>主要工艺说明(<span style="color: red">随项目情况而进行更新</span>)</label>
                        <textarea class="form-control" id="processDescription" name="processDescription" th:text="${data.processDescription}" placeholder="主要工艺说明"></textarea>
                      </div>

                      <div class="form-group">
                        <label for="progressInfo"><span style="color: red">*</span>项目进展情况(<span style="color: red">随项目情况而进行更新</span>)</label>
                        <textarea class="form-control" id="progressInfo" name="progressInfo" th:text="${data.progressInfo}" placeholder="项目进展情况"></textarea>
                      </div>

                      <div class="form-group">
                        <label for="startTime"><span style="color: red">*</span>开工时间</label>
                        <input type="date" class="form-control" id="startTime" name="startTime" th:value="${#dates.format(data.startTime,'yyy-MM-dd')}" placeholder="开工时间">
                      </div>

                      <div class="form-group">
                        <label for="completedTime"><span style="color: red">*</span>计划建成投产时间</label>
                        <input type="date" class="form-control" id="completedTime" name="completedTime" th:value="${#dates.format(data.completedTime,'yyy-MM-dd')}" placeholder="计划建成投产时间">
                      </div>

                      <div class="form-group" th:if="${#httpSession.getAttribute('role_id') == 1}">
                        <label><span style="color: red">*</span>为企业选择关联的用户</label>
                        <select class="form-control" id="userId" name="userId">
                        </select>
                      </div>

                    </div>
                  </div>

                  <hr/>


                  <div class="input-group">
                    <div class="row">
                      <div class="col-lg-12">
                        <div class="row">

                          <div class="col-lg-3" th:each="item:${bills}">
                            <!-- 营业执照图片                                         -->
                            <a th:href="${#httpServletRequest.getScheme() + '://' + #httpServletRequest.getServerName() + ':' + #request.getServerPort()+'/'+item.urlPath}" data-toggle="lightbox" data-title="图片预览">
                              <img th:src="${#httpServletRequest.getScheme() + '://' + #httpServletRequest.getServerName() + ':' + #request.getServerPort()+'/'+item.urlPath}" class="img-fluid mb-2" alt="营业执照"
                                   style="border: 1px solid black; padding: 10px; width: 450px;"/>
                            </a>
                          </div>

                        </div>
                      </div>
                    </div>
                  </div>


                  <!-- 多文件上传组件 -->
                  <div class="row">
                    <div class="col-lg-12">

                      <div class="form-group">
                        <label for="files_upload">票据上传</label>
                        <div class="file-loading">
                          <input id="files_upload" name="files" class="file" type="file" multiple
                                 data-upload-url="/project/uploadFile"
                                 data-theme="fas">
                        </div>
                      </div>
                    </div>
                  </div>
                </div>

                <input type="hidden" id="deleted_id" name="deleted" value="0" />
                <!-- 保存按钮 -->
                <div class="card-footer">
                  <button type="button" class="btn btn-primary" id="save_btn">保存</button>
                </div>
              </form>

            </div>

          </div>

        </div>
      </div>
    </div>
  </div>

  <!-- Control Sidebar -->
<!--  <aside class="control-sidebar control-sidebar-dark">-->
<!--  </aside>-->

<!--  &lt;!&ndash; 版权信息 &ndash;&gt;-->
<!--  <footer class="main-footer">-->
<!--    <strong>Copyright &copy; 2021 <a href="http://www.chengzhouyun.com/" target="_blank">ChengZhouYun</a>.</strong> All-->
<!--    rights reserved.-->
<!--    <div class="float-right d-none d-sm-inline-block">-->
<!--      <b>Version</b> 1.0-->
<!--    </div>-->
<!--  </footer>-->

</div>

<!-- bootstrap-fileinput JS -->
<script src="https://code.jquery.com/jquery-3.5.1.min.js" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js"
        crossorigin="anonymous"></script>

<script src="../../plugins/jquery/jquery.js"></script>
<!-- Bootstrap -->
<script src="../../plugins/bootstrap/js/bootstrap.bundle.js"></script>
<!-- AdminLTE -->
<script src="../../dist/js/adminlte.js"></script>
<!-- OPTIONAL SCRIPTS -->
<!--<script src="../../plugins/chart.js/Chart.min.js"></script>-->
<!-- AdminLTE for demo purposes -->
<script src="../../dist/js/demo.js"></script>
<!-- AdminLTE dashboard demo (This is only for demo purposes) -->
<!--<script src="../dist/js/pages/dashboard3.js"></script>-->
<script src="../../js/bootstrap-fileinput-5.2.2/js/plugins/piexif.js" type="text/javascript"></script>
<script src="../../js/bootstrap-fileinput-5.2.2/js/plugins/sortable.js" type="text/javascript"></script>
<script src="../../js/bootstrap-fileinput-5.2.2/js/fileinput.js" type="text/javascript"></script>
<script src="../../js/bootstrap-fileinput-5.2.2/js/locales/zh.js" type="text/javascript"></script>
<script src="../../js/bootstrap-fileinput-5.2.2/themes/fas/theme.js" type="text/javascript"></script>
<script src="../../js/bootstrap-fileinput-5.2.2/themes/explorer-fas/theme.js" type="text/javascript"></script>
<script src="../../plugins/ekko-lightbox/ekko-lightbox.js" type="text/javascript"></script>

</body>

<script th:inline="javascript">

  // true:数值型的，false：非数值型
  function myIsNaN(value) {
    return !isNaN(value);
  }

  function isPhoneNumber(val){
    var regPos =/^0?1[3|4|5|6|7|8][0-9]\d{8}$/;
    if(regPos.test(val)){
      return true;
    }else {
      return false;
    }
  }

  function isEmptyNull(value){
    if (value == undefined || value == null || value =="") {
      return false;
    }
    return true;
  }

  $(document).ready(function () {

    // 是否为子企业切换点击事件注册
    // thymeleaf 模板引擎中获取session 的角色id和用户id
    const role_id = /*[[${#httpSession.getAttribute('role_id')}]]*/{};  //{}是默认值,/*[[${user}]]*/ 是传进去的值
    const user_id = /*[[${#httpSession.getAttribute('user_id')}]]*/{};  //{}是默认值,/*[[${user}]]*/ 是传进去的值
    const enUser_id = /*[[${data.enUserId}]]*/{};  //{}是默认值,/*[[${user}]]*/ 是传进去的值

    $("#save_btn").on("click",function(event){

      if(!isEmptyNull($("#enId option:selected").text())){
        alert("请选择企业")
        return;
      }
      if(!isEmptyNull($("#projectName").val())){
        alert("请填写项目名称")
        return;
      }
      if(!isEmptyNull($("#address").val())){
        alert("请填写企业住所")
        return;
      }
      if(!isEmptyNull($("#industry").val())){
        alert("请填写所属行业")
        return;
      }
      if(!isEmptyNull($("#totalInvestment").val())){
        alert("请填写总投资")
        return;
      }
      if(!myIsNaN($("#totalInvestment").val())){
        alert("总投资不是有效的数值")
        return;
      }
      if(!isEmptyNull($("#investmentCompleted").val())){
        alert("请填写已完成投资")
        return;
      }
      if(!myIsNaN($("#investmentCompleted").val())){
        alert("已完成投资不是有效的数值")
        return;
      }
      if(!isEmptyNull($("#nextYearPlan").val())){
        alert("请填写未来年计划")
        return;
      }
      if(!myIsNaN($("#nextYearPlan").val())){
        alert("未来年计划不是有效的数值")
        return;
      }

      if(!isEmptyNull($("#constructionContent").val())){
        alert("请填写主要建设内容及规模")
        return;
      }

      if(!isEmptyNull($("#processDescription").val())){
        alert("请填写主要工艺说明")
        return;
      }
      if(!isEmptyNull($("#progressInfo").val())){
        alert("请填写项目进展情况")
        return;
      }

      if(!isEmptyNull($("#startTime").val())){
        alert("请选择开工时间")
        return;
      }
      if(!isEmptyNull($("#completedTime").val())){
        alert("请选择计划建成投产时间")
        return;
      }

      if(role_id == 1){
        if(!isEmptyNull($("#userId").val()) || !myIsNaN($("#userId").val())){
          alert('请为企业选择关联的用户');
          return;
        }
      }

        // 此处使用ajax文件上传
        $.ajax({
          url:"/project/projectbase",
          type:"PUT",
          data: new FormData($("#formData")[0]),
          contentType: false,
          processData : false,
          dataType:"json",
          success: function(res){

            if(res.statusCode == 200) {
              alert(res.message);
              // 跳转页面
              location.href = "/page/ProjectInfo"
            } else{
              alert(res.errorMsg);
            }

          }
        })

    })


    $("#files_upload").fileinput({
      theme: 'explorer-fas',    //主题
      showCaption: true,    //是否显示被选文件的简介
      showBrowse: true,     //是否显示浏览按钮
      showPreview: true,   //是否显示预览区域
      showRemove: true,    //是否显示移除按钮
      showUpload: true,    //是否显示上传按钮
      showCancel: true,    //是否显示取消按钮
      showClose: true,     //是否显示关闭按钮
      uploadAsync:false,  //false 同步上传，后台用数组接收，true 异步上传，每次上传一个file,会调用多次接口
      removeFromPreviewOnError:true, //当选择的文件不符合规则时，例如不是指定后缀文件、大小超出配置等，选择的文件不会出现在预览框中，只会显示错误信息
      // uploadUrl: '/yyyyy',           // 上传文件路径 此处配置无效
      language: 'zh',            //显示语言
      allowedFileExtensions: ['jpg', 'png', 'gif'], //允许的文件扩展名
      overwriteInitial: false,    //初始覆盖
      maxFileSize: 1000,          //限制单个文件大小
      maxFilesNum: 10,             //限制上传文件数量
      allowedFileTypes: ['jpg', 'png', 'gif', "jpeg","bmp"],        //允许的文件类型
      // initialPreviewAsData: false,     //初始预览数据
      // initialPreview: [               //初始预览数据图片地址
      //     "http://lorempixel.com/1920/1080/nature/1",
      //     "http://lorempixel.com/1920/1080/nature/2",
      //     "http://lorempixel.com/1920/1080/nature/3"
      // ],
      //初始预览图片配置
      initialPreviewConfig: [
          {caption: "nature-1.jpg", size: 329892, width: "120px", url: "{$url}", key: 1},
          {caption: "nature-2.jpg", size: 872378, width: "120px", url: "{$url}", key: 2},
          {caption: "nature-3.jpg", size: 632762, width: "120px", url: "{$url}", key: 3}
      ]}).on('filepredelete', function(event, key, jqXHR, data) {
          if(!confirm("确定删除原文件？删除后不可恢复")){
            return false;
          }
    });





    // 登录的角色是管理员的情况下在做请求
    if (role_id == 1) {
      // 请求企业用户列表 2为企业用户列表
      $.get("/usr/user/list/"+ 2,function(data){
        // 取用户下拉框
        var select = document.getElementById("userId");
        // 情况下拉框中的option
        var arr_option = select.options;
        // 先清除在添加
        for(var i = arr_option.length-1;i>=0;i--){
          arr_option.remove(i);
        }
        // 数据状态码为200通过
        if (data.statusCode == 200) {
          // 取到list数据集合
          var list = data.list;
          // forEach遍历
          list.forEach(function(item){
            // 创建select中的option
            var option = document.createElement('option');
            // 赋值用户id给value
            option.value = item.id;
            // 赋值用户名给内容
            option.innerHTML = item.username;
            // 添加到select中
            select.append(option);
          })
          console.log(user_id)
          // 选中这个userId
          $("#userId").val(enUser_id);
        }
      })
    }




    const enId = /*[[${data.enId}]]*/{};  //{}是默认值,/*[[${user}]]*/ 是传进去的值
        // 取下拉框
        var select = document.getElementById("enId");
        // 情况下拉框中的option
        var arr_option = select.options;
        for(var i = arr_option.length-1;i>=0;i--){
          arr_option.remove(i);
        }
        // 判断角色是否为管理员
        if (role_id == 1) {
          // 发起jsonget 请求
          $.getJSON(
                  "/en/enterprise/all",
                  function(data){
                    // 数据状态码为200通过
                    if (data.statusCode == 200) {

                      // 取到list数据集合
                      var list = data.list;
                      // forEach遍历
                      list.forEach(function(item){
                        // 创建select中的option
                        var option = document.createElement('option');
                        // 赋值id和企业名称
                        option.value = item.id;
                        option.innerHTML = item.enName;
                        // 添加到select中
                        select.append(option);
                      })
                      // 设置企业下拉 选中获取回来的企业
                      $("#enId").val(enId)
                    }

                  })
        } else {
          $.get("/en/enterprise/userid/"+ user_id,function(data){

            // 数据状态码为200通过
            if (data.statusCode == 200) {
              // 取到list数据集合
              var list = data.list;
              // forEach遍历
              list.forEach(function(item){
                // 创建select中的option
                var option = document.createElement('option');
                // 赋值id和企业名称
                option.value = item.id;
                option.innerHTML = item.enName;
                // 添加到select中
                select.append(option)
              })

              // 设置企业下拉 选中获取回来的企业
              $("#enId").val(enId)
            }
          })
        }






    // 营业执照图片预览处理
    $(document).on('click', '[data-toggle="lightbox"]', function (event) {
      event.preventDefault();
      $(this).ekkoLightbox({
        alwaysShowClose: true
      });
    });


    $('.btn[data-filter]').on('click', function () {
      $('.btn[data-filter]').removeClass('active');
      $(this).addClass('active');
    });

  });
</script>
</html>
